<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
    <style>
        .layui-btn+.layui-btn{
            margin-left: 0;
        }
        .layui-table td, .layui-table th
        {
            min-width: 50px !important;
        }
        #template_list {
        }
        #template_list li{
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 14.5%;
            margin-bottom: 10px;
            height: 405px;
            text-align: center;
            overflow: hidden;
        }
        #template_list li a {
            height: 350px;
            background-color: #eee;
            padding: 7px;
            border-radius: 5px;
            width: 100%;
            justify-content: center;
            display: flex;
            align-items: center;
        }
        #template_list li img {
            max-height: 350px;
            padding: 7px;
            max-width: 100%;
        }
        #template_list .tname{
            line-height: 20px;
            font-size: 16px;
        }
        #template_list .tagname{
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            display: inline-block;
            padding: 0 4px;
            margin-right: 6px;
            color: #fff;
            border-radius: 3px;
            background: rgba(255,63,41,.8);
            font-weight: 400;
            transform: translateY(-1px);
        }
        #tag_list{
            width: 100%;
            display: inline-block;
        }
        #tag_list a{
            height: 25px;
            line-height: 25px;
            color: #666;
            font-size: 14px;
            padding: 0 10px;
            border: 1px solid #ccc;
            border-radius: 13px;
            cursor: pointer;
            margin: 15px 7px 0 0;
            color: #000;
        }
        #tag_list a:hover{
            background: rgba(255,63,41,.8);
            color: #fff;
        }
        #tag_list .thistag{
            background: rgba(255,63,41,.8);
            color: #fff;
        }
    </style>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a><cite>{$nav}</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
    </div>
    <div class="x-body x-admin">
        
      <xblock style="margin-bottom:20px;display: block;">
        {if condition="$group_id == 7 || $group_id == 1"}
        <button style="float:left;" class="layui-btn" onclick="x_admin_show('新增记录','{:url('Operators/templateEdit',['tag_id'=>$tag_id])}','','500','600')">新增</button>
        <button style="float:left; margin-left:10px" class="layui-btn" onclick="x_admin_show('批量上传','{:url('Operators/templateMutiplyUpload',['tag_id'=>$tag_id])}','','500','400')">批量上传</button>
        {/if}
        <div class="layui-card-body" style="padding-left: 0;float:left;padding-left:20px;padding-top:0;">
          <form class="layui-form layui-col-space5" action="" method="get">
            <div class="layui-inline layui-show-xs-block">
                <input style="width:260px;" type="text" name="keyword" id="keyword" value="{:input('keyword')}" placeholder="请输入关键词/编号" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-inline">
                <select name="admin_id" id="admin_id">
                    <option value="">全部运营</option>
                    {foreach name="staffList" id="value"}
                    <option value="{$value.id}" {if condition="$admin_id == $value.id"}selected{/if}>{$value.name}</option>
                    {/foreach}
                </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn" id="search-btn"><i class="layui-icon"></i></button>
            </div>
          </form>
        </div>
        <span class="x-right" style="line-height:40px" id="count_span"></span>
        <div id="tag_list">
            <a href="{:url('operators/templateList')}">全部</a>
            {foreach name="tag_list" id="v"}
            <a href="?tag_id={$v.id}" data-id="{$v.id}" data-name="{$v.name}" title="{$v.name}" class="onetag{if condition="$tag_id == $v.id"} thistag{/if}" >{$v.name}({$v.count})</a>
            {/foreach}
            {if condition="$group_id == 1 || $group_id ==7"}
            <a href="javascript:;" id="add_tag" title="新增风格类型">+</a>
            {/if}
        </div>
      </xblock>
      <div>
          <ul class="flow-default" id="template_list"></ul>
          
      </div>


    </div>

<script>
layui.use(['form', 'layedit', 'laydate','table','jquery','flow'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table
  ,flow = layui.flow
  ,$ = layui.jquery;
  
  flow.load({
    elem: '#template_list' 
    //,scrollElem: '#template_list'
    ,isAuto: true
    ,isLazyimg: true
    ,done: function(page, next){ 
        $.get('{:url("operators/templateListData")}',{keyword:'{$keyword}',admin_id:'{$admin_id}',tag_id:'{$tag_id}',page:page },function(data){
            $('#count_span').html('共有记录：'+data.count+'条');
            var lis = [];
            $.each(data.list,function(index,value){ 
                lis.push('<li data-id="'+value.id+'"><a href="javascript:;" href1="'+value.pic_path+'" target1="_blank"><img lay-src="'+value.pic_path+'"></a><div class="tname">'+value.tagsHtml+'编号:'+value.id+' '+value.name+' '+value.admin_name+'</div></li>')
            })
            next(lis.join(''), page < 100);
        },'json')
    }
  });
  
  flow.lazyimg({
    elem: '#template_list img'
    ,scrollElem: '#template_list'
  });
  
  $('#template_list').on('click','li', function(){
    layer.open({
        type: 2,
        title: $(this).find('.tname').html(),
        shadeClose: true,
        shade: 0.8,
        area: ['500px', '85%'],
        content: 'templateInfo?id='+$(this).attr('data-id')
    }); 
  });
  {if condition="$group_id == 1 || $group_id ==7"}
  $('#add_tag').click(function(){
    layer.prompt({title: '请输入新增的风格名称', formType: 0}, function(value, index){
        $.post('{:url("operators/addTag")}',{tag_name:value},function(obj){
            layer.alert(obj.msg, {icon: obj.icon},function(){
                window.location.reload();
            })
        })
        layer.close(index);
    });
  });
  
    $('.onetag').contextmenu(function(e) {
        e.preventDefault();
        let dataId = $(this).attr('data-id');
        layer.prompt({title: '请输入风格名称', formType: 0 , value: $(this).attr('data-name')}, function(value, index){
            $.post('{:url("operators/editTag")}',{id:dataId,tag_name:value},function(obj){
                layer.alert(obj.msg, {icon: obj.icon},function(){
                    window.location.reload();
                })
            })
            layer.close(index);
        });
        
    })
  {/if}
  
});

</script>
</body>

</html>